<template>
	<view>
		<view v-if="badgeText !== 0" class="badge" :class="{error: !badgeNotice, default: badgeNotice}">
			<text class="text">{{badgeText > 99 ? '99+' : badgeText}}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		watch,
	} from 'vue';
	let props = defineProps({
		text: Number,
		notice: Boolean,
	});

	let badgeText = ref(0);
	let badgeNotice = ref(false);

	watch(() => props.text, (val) => {
		badgeText.value = val;
	}, {
		immediate: true,
	});

	watch(() => props.notice, (val) => {
		badgeNotice.value = val ?? false;
	}, {
		immediate: true,
	});
</script>

<style lang="scss" scoped>
	.badge {
		height: 16px;
		padding: 0 12rpx;
		border-radius: 50%;
		background-color: red;


		.text {
			line-height: 16px;
			font-size: 12px;
			color: #fff;
		}
	}

	.error {
		background-color: red;
	}

	.default {
		background-color: #D0CFD1;
	}
</style>
